import styled from "styled-components";

const LoginWrapper = styled.div`
  height: 100%;
  text-align: center;
  user-select: none;
  background-image: url("http://api.wewin888.cn/uploads/3a26fe1c-0862-5cb5-8686-fc8aeb78e515.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  .box-container {
    background-color: red;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
    background-size: cover;
  }
  .my-shadow {
    box-shadow: inset 5px -5px 12px #d1d9e6, inset -5px -5px 12px #f9f9f9;
  }
  .rc-slider-captcha-jigsaw-puzzle {
    width: 70px !important;
  }
  .login-box {
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 450px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    transition: all 0.3s;
    .left {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
    .right {
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    }
    .ant-btn {
      width: 60%;
    }
    .title {
      position: absolute;
      left: 50%;
      top: -50px;
      transform: translateX(-50%);
    }
  }
`;
const HandleLoginWrapper = styled.div`
  padding: 20px 35px 10px;
  .ant-form-item {
    margin-bottom: 30px;
  }
`;

export { LoginWrapper, HandleLoginWrapper };
